import styled from 'styled-components'
import { px2rem } from '@/assets/global-style'
export const HomeWrapper = styled.div`
    width: 100%;
    height:800px;
    background-color: #ffffff;
    font-size: ${px2rem(14.5)};
    padding-bottom: ${px2rem(2)};
    overflow: hidden scroll;
    scroll-behavior: smooth;
    .home-top {
        width:100%;
        position: fixed;
        top:0;
        z-index: 999;
        background-repeat:no-repeat;
        background-size:100% 18vh;
        background-image: url("https://gw.alicdn.com/imgextra/i1/O1CN017xWogi1e1U9IIw7IN_!!6000000003811-2-tps-750-372.png_790x10000.jpg_.webp");
        padding-bottom:${px2rem(5)};
        .title-bar {
        display: flex;
        padding: ${px2rem(2)} ${px2rem(15)};
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        img {
        padding-top: ${px2rem(6)};
        width:  ${px2rem(115)};
        height:  ${px2rem(30)}
        }
        .title-icon {
            width: ${px2rem(68)};
            height: ${px2rem(30)};
            padding: 0 ${px2rem(6)};
            border-radius: ${px2rem(50)};
            line-height: ${px2rem(30)};
            background: hsla(0,0%,100%,.5019607843137255);
            .icon-left {
                width: ${px2rem(15)};
                height: ${px2rem(15)};
                padding-right: ${px2rem(4)};
            }
            .icon-right {
                position: absolute;
                margin: ${px2rem(7)} ;
                width: ${px2rem(8)};
                height: ${px2rem(4.5)};
                transform: rotate(0deg);
            }
        }
        }
        .home-search {
            position: relative;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            width: ${px2rem(343)};
            height: ${px2rem(38)};
            margin: ${px2rem(4.5)} auto;
            background: #fff;
            border-radius: 5.33333vw;
            overflow: hidden;
            box-sizing: border-box;
            border: 0.4vw solid #fff;
            .placeholder {
                padding-left: ${px2rem(16)};
            }
            .btn-search {
                width: ${px2rem(60)};
                height: ${px2rem(30)};
                position: absolute;
                right: ${px2rem(4.5)};
                color: #000;
                font-size: ${px2rem(13)};
                font-weight: 600;
                line-height: ${px2rem(30)};
                text-align: center;
                background: 50%/contain no-repeat url(https://gw.alicdn.com/imgextra/i3/O1CN01LjiKAD1V4O7MOh7eC_!!6000000002599-2-tps-240-120.png_240x10000.jpg);
                pointer-events: none;
                z-index: 2;
            }
        }
    }
    .home-card {
        margin-top:${px2rem(75)};
        padding-top: ${px2rem(25)};;
        width: 100%;
        height: ${px2rem(160)};
        background-repeat:no-repeat;
        background-size:100% 27vh;
        background-image: url("https://gw.alicdn.com/imgextra/i3/O1CN01YzDTiA1Iu3nONVI5O_!!6000000000952-2-tps-749-335.png_790x10000.jpg_.webp");
        .card-list {
            width:${px2rem(340)};
            margin:2px auto;
            border: 1px solid #fff;
            display: flex;
            flex-direction:row;
            flex-wrap: wrap;
            border-radius: 5%;
        }
    }
    .home-list{
        width: ${px2rem(345)};
        height: ${px2rem(140)};
        margin: ${px2rem(10)} auto;
        background: 50%/contain no-repeat;
        font-size: ${px2rem(13)};
        color:#42664b;
        background-image: url("https://gw.alicdn.com/imgextra/i2/O1CN01taRRJa1o4MnXFmIoP_!!6000000005171-2-tps-1380-556.png_570x10000.jpg");
        .home-list-title {
            height: ${px2rem(20)};
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
            position: relative;
            padding: 1px 0;
            margin: ${px2rem(6)} ${px2rem(7.5)}  ${px2rem(4.5)};
            .title-icon {
                height: ${px2rem(15)};
                width:  ${px2rem(15)};
            }
            .list-title-sub {
            height: ${px2rem(15)};
            margin-left:  ${px2rem(5)};
            padding: 0  ${px2rem(6)};
            background: #fff;
            border-radius:  ${px2rem(7)};
            font-size:  ${px2rem(13)};
            color: #42664b;
            line-height: ${px2rem(15)};
            font-weight: 600;
            }
            .list-title-more {
            display: flex;
            flex-direction: row;
            align-items: center;
            font-size: ${px2rem(13)};
            justify-content: center;
            position: absolute;
            right: 0;
            height: ${px2rem(16)};
            padding: 0 ${px2rem(6)};
            background: hsla(0,0%,100%,.5803921568627451);
            border-radius: ${px2rem(9)};
            overflow: hidden;
            .list-title-more-text {
                margin-right: ${px2rem(4)};
                color:#42664b;
            }
            img {
                width:  ${px2rem(4)};
                height:  ${px2rem(7)};
            }
            }
        
        }
        .home-list-container {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 0  ${px2rem(7)};
        .home-list-item {
            width:  ${px2rem(106)};
            height:  ${px2rem(103)};
            position: relative;
            border-radius:${px2rem(8)}; 
            overflow: hidden;
            .list-item-badge {
                position: absolute;
                top: 0;
                left: 0;
                height: ${px2rem(22)};
                max-width: 90%;
                padding: 0 ${px2rem(6)};
                display: flex;
                flex-direction: row;
                align-items: center;
                background: rgba(0,0,0,.4);
                border-radius: ${px2rem(6)} 0 ${px2rem(9)} 0;
                z-index: 1;
                img {
                    width: ${px2rem(11)};
                    height: ${px2rem(12)};
                    object-fit: cover;
                    margin-left: ${px2rem(-2)};
                    margin-right: ${px2rem(3)};
                }
                .list-item-badge-text {
                    color: #fff;
                    font-size: ${px2rem(11)};
                    font-weight: 600;
                    line-height: ${px2rem(22)};
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
                .list-item-title {
                    position: absolute;
                    left:${px2rem(9)};
                    right:${px2rem(9)};
                    bottom: -20vw;
                    color: #fff;
                    font-weight: 500;
                    font-size: ${px2rem(12)};
                    line-height: ${px2rem(12)};
                    z-index: 5;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }
        }
        }
    }

       
`
